<template>
	<view>
		<u-navbar back-icon-color="#FFFFFF" title="商品详情" :background="background" title-color="#FFFFFF"></u-navbar>
		<view class="banner u-m-t-20">
			<image v-if="goodsInfo.sliderImages == null" style="width: 100%;height: 500rpx;" :src="goodsInfo.img" mode="aspectFit" @click="previewImage"></image>
			<u-swiper v-else :list="goodsInfo.sliderImages" :height="500" mode="number" indicator-pos="bottomRight" img-mode="aspectFit"></u-swiper>
		</view>
		<view class="u-p-l-30 u-p-r-30 u-m-t-20 u-m-b-40">
			<view class="u-flex u-col-bottom">
				<u-tag v-if="goodsInfo.isHot" text="新品" type="primary" size="mini" class="u-m-r-10" />
				<u-tag v-if="goodsInfo.isNew" text="热卖" type="error" size="mini" class="u-m-r-10" />
				<view class="u-line-1 u-font-xl">{{ goodsInfo.name }}</view>
			</view>
			<view class="u-m-t-20">
				<text class="u-font-xl u-type-error">￥{{ goodsSellPrice }}</text>
			</view>
			<view class="u-m-t-20">
				<u-row gutter="16">
					<block v-for="(item, index) in goodsSkuInfo" :key="item.id">
						<u-col span="3">
							<view class="goodsTag" @tap="changeTag(index)" :class="skuId == item.id ? 'active' : ''">
								<view class="u-p-t-10">{{ item.specValues }}</view>
								<view class="u-p-b-10">￥{{ item.unitPrice }}/{{ item.unit }}</view>
							</view>
						</u-col>
					</block>

					<!-- 	<u-col span="3" class="goodsTag ">
						<view class="u-p-t-10">每瓶(500g)</view>
						<view class="u-p-b-10">￥2.00/瓶</view>
					</u-col> -->
				</u-row>
			</view>
		</view>
		<u-gap height="20" bg-color="#f3f4f6"></u-gap>
		<view class="u-p-r-30 u-p-l-30 u-p-t-20 u-p-b-20">
			<u-row gutter="16" align="top">
				<u-col span="2" class=""><view class="">配送</view></u-col>
				<u-col span="8" class="">
					<view class="u-font-xs">{{ goodsDistributionRule }}</view>
				</u-col>
			</u-row>
		</view>
		<u-gap height="20" bg-color="#f3f4f6"></u-gap>
		<view class="content">
			<view class="content-title">商品详情</view>
			<rich-text :nodes="goodsInfo.introduction?goodsInfo.introduction:''"></rich-text>
		</view>
		<view class="navigation">
			<view class="left">
				<!-- <view class="item" @click="addSnapshoot(goodsInfo.id)">
					<u-icon name="heart-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">收藏</view>
				</view> -->
				<view class="item car" @click="goCarTab()">
					<u-badge class="car-num" :count="count" size="mini" type="warning" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="40"></u-icon>
					<view class="text u-line-1">购物车</view>
				</view>
			</view>
			<view class="right">
				<view v-if="btnStatus" class="cart btn u-line-1" @tap="goCar(goodsInfo.id)">加入购物车</view>
				<view v-else class="numberBox">
					<u-number-box
						disabled-input
						class=""
						:min="1"
						size="32"
						:input-width="300"
						:input-height="60"
						bg-color="#ff9900"
						color="#ffffff"
						v-model="carValue"
						@minus="valChangeStep"
						@plus="valChangeStep"
					></u-number-box>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			background: {
				//backgroundColor: '#001f3f'
				// 渐变色
				backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
			},
			//
			userInfo: {},
			//当前sku信息
			goodsSellPrice: 0,
			//
			goodsId: 0,
			//
			skuId: 0,
			//
			goodsInfo: [],
			goodsSkuInfo: {},
			//
			btnStatus: true,
			//添加购物商品数量
			carValue: 1,
			count: 0,
			//
			goodsDistributionRule: ''
		};
	},
	onLoad(e) {
		console.log(e);
		try {
			const token = uni.getStorageSync('token');
			console.log(token);
			if (token) {
				this.userInfo = uni.getStorageSync('userInfo');
				console.log(this.userInfo);
				if(!this.userInfo){
					//#ifdef APP-PLUS
					uni.reLaunch({
						url: '/pages/login/index'
					});
					//#endif
					//#ifdef MP-WEIXIN
					uni.reLaunch({
						url: '/pages/login/xcxLogin'
					});
					//#endif
				}
				const goodsId = e.goodsId;
				this.getGoodsInfo(goodsId);
				this.getGoodsSkuInfo(goodsId);
				this.getFixed();
				console.log('this.btnStatus')
				console.log(this.btnStatus)
			} else {
				//#ifdef APP-PLUS
				uni.reLaunch({
					url: '/pages/login/index'
				});
				//#endif
				//#ifdef MP-WEIXIN
				uni.reLaunch({
					url: '/pages/login/xcxLogin'
				});
				//#endif
			}
		} catch (e) {
			// error
		}
	},
	methods: {
		//
		getFixed() {
			this.$u.api.getFixedInfo().then(res => {
				console.log('getFixedInfo=======');
				this.noticelist = [];
				if(res.data.content){
					res.data.content.forEach(item => {
						if (item.value == 'GOODS_DISTRIBUTION_RULE') {
							this.goodsDistributionRule = item.content;
						}
					});
				}
			});
		},
		//
		checkoutSnapshoot() {
			this.$u.api.checkoutSnapshoot({ goodsId: goodsId }).then(res => {
				console.log('checkoutSnapshoot');
				console.log(res);
			});
		},
		//
		previewImage() {
			var imageArray = new Array();
			if (this.goodsInfo.sliderImages == null) {
				imageArray[0] = this.goodsInfo.img;
			} else {
				imageArray[0] = this.goodsInfo.img;
			}
			// 预览图片
			uni.previewImage({
				urls: imageArray
			});
		},
		//商品信息
		getGoodsInfo(goodsId) {
			this.$u.api.getGoodsInfo({ id: goodsId }).then(res => {
				console.log('getGoodsInfo');
				console.log(res);
				if (res.data == null) {
					uni.showToast({
						title: '暂未该商品信息',
						duration: 2000
					});
				} else {
					this.goodsInfo = res.data;
				}
			});
		},
		//sku信息
		getGoodsSkuInfo(goodsId) {
			this.$u.api.getGoodsSkuInfoUrl({ goodId: goodsId }).then(res => {
				console.log('goodsSkuInfo');
				console.log(res);
				this.goodsSkuInfo = res.data;
				this.skuId = this.goodsSkuInfo[0].id;
				this.goodsSellPrice = this.goodsSkuInfo[0].sellPrice;
				//当前sku购物车数量
				this.initCar(this.skuId);
			});
		},
		changeTag(index) {
			this.skuId = this.goodsSkuInfo[index].id;
			this.goodsSellPrice = this.goodsSkuInfo[index].sellPrice;
			this.initCar(this.skuId);
		},
		initDate() {
			console.log("initDate====start");
			this.carValue = 0;
			this.btnStatus = true;
			console.log("initDate====end");
		},
		//初始化购物车
		initCar(skuId) {
			console.log("initCar======start");
			this.$u.api.getSkuCar({ skuId: skuId }).then(res => {
				console.log(res);
				console.log("initCar======end");
				if (res.statusCode == 200) {
					this.btnStatus = false;
					this.count = res.data.goodCount;
					this.carValue = res.data.skuCount;
					console.log('this.btnStatus')
					console.log(this.btnStatus)
				}else if(res.statusCode == 400){
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}, 2000)
				}else {
					this.btnStatus = true;
				}
			});
		},
		//加入购物车
		addCar(skuId, goodsNumber) {
			console.log('addCar========start');
			this.$u.api.postAddCar({ skuId: skuId, goodsNumber: goodsNumber }).then(res => {
				console.log(res);
				console.log('addCar========end');
				if (res.statusCode == 200) {
					this.$refs.uToast.show({
						title: '添加成功!',
						type: 'success'
					});
					this.initCar(this.skuId);
				}
			});
		},
		goCar() {
			this.btnStatus = false;
			this.carValue = 1;
			//this.count = this.carValue;
			this.addCar(this.skuId, this.carValue);
		},
		valChangeStep(e) {
			console.log('当前值为: ' + e.value)
			if (e.value == 0) {
				this.btnStatus = true;
			}
			console.log('this.addCar');
			this.addCar(this.skuId, this.carValue);
			this.count = this.carValue;
			//
		},
		//收藏
		addSnapshoot(goodId) {
			this.$u.api.addSnapshoot({ goodId: goodId }).then(res => {
				console.log('addSnapshoot');
				console.log(res);
				if (res.statusCode == 200) {
					this.$refs.uToast.show({
						title: '添加成功!',
						type: 'success'
					});
				}
			});
		},
		goCarTab() {
			this.$u.route({
				type: 'tab',
				//params: this.params,
				url: '/pages/cart/index'
			});
		}
	}
};
</script>

<style lang="scss">
.goodsTag {
	background-color: #71d5a1;
	border-radius: 8rpx;
	padding: 0 10rpx;
	color: #ffffff;
	font-size: 24rpx;
	text-align: left;
}
.content {
	padding: 0 30rpx;
	.content-title {
		padding: 30rpx 0;
		font-weight: bold;
		font-size: 28rpx;
	}
}
.navigation {
	display: flex;
	position: fixed;
	bottom: 0;
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0;
	width: 100%;

	.left {
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 30rpx;
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					text-align: center;
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		width: 100%;
		align-items: center;
		justify-content: center;

		.btn {
			text-align: center;
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
			width: 90%;
		}
		.cart {
			text-align: center;
			background-color: #ff7900;
			margin-right: 30rpx;
		}
		.buy {
			background-color: #ff7900;
		}
	}
}
.u-icon-plus {
	background-color: #ff7900 !important;

	input {
		background-color: #ff7900 !important;
	}
}
.uni-input-wrapper {
	background: #ff7900 !important;
}
.active {
	background-color: #18b566 !important;
}
</style>
